<template>
  <div>
    <div
      @click.self="closeMask"
      v-if="pepleishow"
      class="x-people"
      :style="{height:`${deviceH}px`}"
    >
      <div class="people-ctx" :style="{'background-image':`url(${modelBg})`}">
        <div class="ctx-title">实有车辆</div>
        <div class="ctx-info">
          <div class="info-item">
            <div class="item-name" style="color:#56FFFA">车辆占比</div>
            <div class="item-pie">
              <x-pie id="stoptotal" :data="CarEchartsData[1].itmes" mapType="cars" />
            </div>
          </div>
          <div class="info-item" style="flex:2">
            <div style="display:flex;">
              <div
                style="padding-right:20px;border-right:1px solid #50E3C2;cursor:pointer;"
                @click="carDetailPageShow()"
              >
                <div style="height:28px"></div>
                <img style="width:210px;height:54px" src="@/assets/images/carmodel.png" alt />
                <div class="ctx_span">车辆总数 &nbsp; |&nbsp; {{sitenums}}</div>
              </div>
              <div style="margin-left:20px;">
                <img style="width:191px;height:82px" src="@/assets/images/carsite.png" alt />
                <div class="ctx_span">车位总数&nbsp; |&nbsp; {{carnums}}</div>
              </div>
            </div>
            <!-- <div class="item-name">{{CarEchartsData[1].resultname}}</div>
          <div class="item-pie">
            <x-pie id="cartotal" :data="CarEchartsData[1].itmes" />
            </div>-->
          </div>
          <div class="info-item">
            <div class="item-name" style="color:#56FFFA">车位占比</div>
            <div class="item-pie">
              <x-pie id="fixcar" :data="CarEchartsData[0].itmes" />
            </div>
          </div>
        </div>
        <div class="ctx-footer">
          <div class="footer-category">
            <div class="category-name" style="color:#56FFFA">24小时车流量统计</div>
            <div class="category-ctx">
              <x-line
                id="cartype"
                mapType="splitTime"
                :xData="typeXData"
                type="cartype"
                :data="CarEchartsData[4].itmes"
              />
            </div>
          </div>
          <div class="footer-category">
            <div class="category-name" style="color:#56FFFA">近30天采集频次</div>
            <div class="category-ctx">
              <x-line
                id="cartime"
                mapType="stopTime"
                :xData="timeXData.slice(0,20)"
                :data="CarEchartsData[3].itmes.slice(0,20)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--详情页-->
    <div
      @click.self="closeMask"
      v-if="!pepleishow"
      class="x-house"
      :style="{ height: `${deviceH}px` }"
    >
      <div
        v-show="isShowCtx == 2"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
      >
        <!--返回按钮-->
        <span @click="maskPageHide()" style="float:right;cursor:pointer;" class="back">
          <img src="../../assets/images/icon/return.png" />
        </span>
        <div class="footer-unit" style="margin-top:20px">
          <div class="unit-header">
            <div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
          </div>

          <div
            style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;"
          >
            <div class="header-item" style="margin-right:30px;">
              <input v-model="peopleName" class="input" placeholder="姓名" />
            </div>
            <div class="header-item" style="margin-right:30px;">
              <input v-model="peopleUserID" class="input" placeholder="身份证号" />
            </div>
            <div class="header-item" style="margin-right:30px;">
              <input v-model="peoplePhone" class="input" placeholder="联系电话" />
            </div>
            <div class="header-item" style="margin-right:30px;">
              <input v-model="peopleLicense" class="input" placeholder="车牌号" />
            </div>
            <div class="header-select" style="margin-right:30px;">
              <x-select
                @selectItem="selectItem"
                :name="unitTypeName || '全部'"
                :listItem="unitTypeList"
              />
            </div>
            <div @click="searchEvent()" class="header-btn">搜索</div>
          </div>

          <div class="unit-list">
            <ul class="list-ul">
              <li class="list-li">
                <div class="item-no">序号</div>
                <div class="li-name">姓名</div>
                <div class="li-phone">身份证号</div>
                <div class="li-phone">联系电话</div>
                <div class="li-phone">住址</div>
                <div class="li-phone">车牌号</div>
              </li>
              <li
                @click="showPeopleDetail(index, item)"
                v-if="cars.length >= 0"
                v-for="(item, index) in cars"
                :key="index"
                style="cursor: pointer;"
                class="list-li"
              >
                <div class="item-no">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
                <div class="li-name">{{ item.name }}</div>
                <div
                  :alt="item.idNum"
                  :title="item.idNum"
                  class="li-phone"
                >{{ new String().hideidCard(item.idNum) }}</div>
                <div :alt="item.phone" :title="item.phone" class="li-phone">{{ item.phone }}</div>
                <div class="li-phone">{{ item.roomNum }}</div>
                <div class="li-phone">{{ item.license }}</div>
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div
        v-if="isShowCtx == 3"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
        s
      >
        <div>
          <x-dangan :id="danganid" @changedangan="changedangan"></x-dangan>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import XPie from "@/components/xpie";
import XPage from "@/components/xpage";
import XLine from "@/components/xline";
import XSelect from "@/components/xselect";
import XDangan from "@/components/xdanganmodel";
import { getCarForPage } from "@/api/peopleApi";
export default {
  name: "xcarmodel",
  props: {
    CarEchartsData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    code: {
      type: String,
      default: ""
    }
  },
  computed: {
    typeXData() {
      return this.CarEchartsData[4].itmes.map(el => {
        return el.resultname;
      });
    },
    timeXData() {
      return this.CarEchartsData[3].itmes.map(el => {
        return el.name.slice(5,el.name.length);
      });
    },
    carnums() {
      return this.CarEchartsData[0].itmes.reduce((a, el) => {
        // console.log(value);
        return a + el.value;
      }, 0);
    },
    sitenums() {
      return this.CarEchartsData[1].itmes.reduce((a, el) => {
        return a + el.value;
      }, 0);
    }
  },
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      deviceH: 0,
      clickTitle: "",
      pepleishow: true,
      isShowCtx: 2,
      pageNum: 1,
      pageSize: 10,
      cars: [],
      alltotal: 0,
      allpage: 0,
      modelBg1: require("@/assets/images/modelBg.png"),
      peopleName: "",
      peopleUserID: "",
      peoplePhone: "",
      peopleLicense: "",
      unitTypeName: "",
      unitType: "",
      unitTypeList: [
        {
          enumName: "全部",
          id: 10
        },
        {
          enumName: "本地车牌",
          id: 1
        },
        {
          enumName: "外地车牌",
          id: 2
        }
      ],
       danganid: "",
      // carnums: 0,
      // sitenums: 0
    };
  },
  components: {
    XPie,
    XLine,
    XPage,
    XSelect,
    XDangan
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
    this.CarEchartsData[0].itmes=[{name:'地面停车位',value:400},{name:'地下停车位',value:1260}]
  },

  methods: {
      showPeopleDetail(index, item){
    this.danganid=item.idNum
    this.isShowCtx = 3

  },
      changedangan() {
      this.isShowCtx = 2;
    },
    carDetailPageShow() {
      this.clickTitle = "实有车辆：车辆总数";
      this.pepleishow = !this.pepleishow;
      this.carDetailPage();
    },
    async carDetailPage() {
      var data = {};
      data.placeId = this.code;
      data.pageNum = this.pageNum;
      data.pageSize = this.pageSize;

      if (this.peopleName != "") {
        data.name = this.peopleName;
      }
      if (this.peopleUserID != "") {
        data.idNum = this.peopleUserID;
      }
      if (this.peoplePhone != "") {
        data.phone = this.peoplePhone;
      }
      if (this.peopleLicense != "") {
        data.license = this.peopleLicense;
      }
      if (this.unitType == 1) {
        data.licenseType = 1;
      } else if (this.unitType == 2) {
        data.licenseType = 2;
      } else if (this.unitType == 10) {
        data.licenseType = "";
      }

      console.log("=-=-" + JSON.stringify(data));

      const res = await getCarForPage(data);
      console.log("**********");
      console.log(JSON.stringify(res));
      this.cars = res.list;
      this.alltotal = res.total;
      this.allpage = Math.ceil(this.alltotal / this.pageSize);
    },
    //从详情页返回人口页面
    maskPageHide() {
      this.pepleishow = true;
      this.pageNum = 1;
      this.peopleName = "";
      this.peopleUserID = "";
    },
    currentChange(n) {
      console.log(n);
      console.log("分页");
      this.pageNum = n;
      this.carDetailPage();
    },
    async searchEvent() {
      // console.log("===" + this.unitType);
      // if (
      //   this.peopleName == "" &&
      //   this.peopleUserID == "" &&
      //   this.peoplePhone == "" &&
      //   this.peopleLicense == "" &&
      //   this.unitType == ""
      // ) {
      //   console.log("stop");
      //   return;
      // }
      console.log("pass");
      this.pageNum = 1;
      this.currentChange(1);
    },
    //选择下拉框
    selectItem(name, id) {
      this.unitTypeName = name;
      this.unitType = id;
    },
    closeMask() {
      this.$emit("closeMask");
    }
  }
};
</script>
<style lang="less" scoped>
.x-people {
  width: 100%;
  height: calc(100vh);
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .ctx-title {
    width: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 42px;
    color: #c9fbfe;
    letter-spacing: 4.8px;
    text-align: center;
    box-sizing: border-box;
  }

  .people-ctx {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1825px;
    height: 914px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .top {
      overflow: hidden;

      ul {
        list-style: none;
        overflow: hidden;
        float: left;
        margin-left: -38px;

        li {
          background: url(../../assets/images/renkou_top_kuang.png) no-repeat;
          width: 312px;
          height: 120px;
          float: left;
          margin-right: 15px;
          text-align: left;
          text-indent: 20px;
          position: relative;

          p:nth-child(1) {
            color: #69f1f7;
            font-size: 18px;
          }

          p:nth-child(2) {
            color: #fff;
            font-size: 26px;
            margin-top: 0px;
          }

          li:nth-child(3) {
            margin-right: 0px;
          }

          span {
            position: absolute;
            color: #fff;
            font-size: 26px;
            top: 56px;
            left: 112px;
          }
        }
      }

      ol {
        list-style: none;
        overflow: hidden;
        float: left;

        li {
          float: left;
          width: 235px;
          height: 100px;
          overflow: hidden;
          border-right: 4px solid #69f1f7;

          img {
            float: left;
            margin-top: 12px;
            margin-left: 20px;
          }

          div {
            float: left;
            margin-left: 22px;

            p:nth-child(1) {
              font-size: 22px;
              color: #69f1f7;
              margin-left: -25px;
            }

            p:nth-child(2) {
              font-size: 18px;
              color: #69f1f7;
              margin-left: 2px;
            }
          }
        }
      }
    }

    .middle {
      overflow: hidden;
      width: 1825px;
      margin-left: -20px;

      .middle_one {
        background: url(../../assets/images/renkou_middle_1.png) no-repeat;
        width: 1145px;
        height: 296px;
        float: left;
        overflow: hidden;

        #main {
          float: left;
        }

        #main2 {
          width: 320px;
          height: 235px;
          float: left;
          margin-top: 49px;
          margin-left: -25px;

          .type-title {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
          }

          .type-list {
            width: 100%;
            padding: 0;
            margin-top: 9px;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-sizing: border-box;

            .type-list-rs {
              width: 100%;
              list-style: none;
              margin-bottom: 20px;

              .rs-name {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #e5e5e5;
                margin-bottom: 5px;

                .name {
                  flex: 1;
                  text-align: left;
                }

                .number {
                  flex: 1;
                  text-align: right;
                }
              }

              .rs-process {
                width: 100%;
                height: 6px;
                border-radius: 4px;
                background: #333333;

                .process {
                  transition: width 0.3s ease-in-out;
                  height: 100%;
                  border-radius: 4px;
                  background-image: linear-gradient(
                    270deg,
                    #68e0cf 0%,
                    #209cff 100%
                  );
                }
              }
            }
          }
        }
      }

      .middle_two {
        background: url(../../assets/images/renkou_middle_2.png) no-repeat;
        width: 633px;
        height: 296px;
        float: left;
        margin-left: 20px;
      }
    }

    .bottom {
      overflow: hidden;
      width: 1825px;
      margin-left: -39px;

      .bottom_one {
        background: url(../../assets/images/renkou_bottom_1.png) no-repeat;
        width: 696px;
        height: 448px;
        float: left;
        margin-left: 20px;

        .bottom_one_0 {
          position: absolute;
          left: 158px;
          bottom: 294px;
          z-index: 1000;
          color: #fff;
        }

        .bottom_one_1 {
          position: absolute;
          left: 504px;
          bottom: 216px;
          z-index: 1000;
          color: #fff;
        }

        .bottom_one_2 {
          position: absolute;
          left: 69px;
          bottom: 148px;
          z-index: 1000;
          color: #fff;
        }

        .bottom_one_3 {
          position: absolute;
          left: 569px;
          bottom: 81px;
          z-index: 1000;
          color: #fff;
        }
      }

      .bottom_two {
        background: url(../../assets/images/renkou_bottom_2.png) no-repeat;
        width: 468px;
        height: 448px;
        float: left;
        margin-left: 2px;
      }

      .bottom_three {
        background: url(../../assets/images/renkou_bottom_3.png) no-repeat;
        width: 634px;
        height: 448px;
        float: left;
        margin-left: 0px;

        ul {
          overflow: hidden;
          margin-top: 100px;
          list-style: none;

          li {
            float: left;
            position: relative;
            margin-right: 26px;
            margin-bottom: 30px;

            div {
              position: absolute;
              z-index: 999;
              top: 16px;
              left: 38px;
              text-align: center;
              width: 46px;

              p {
                color: #fff;
              }

              p:nth-child(1) {
                font-size: 16px;
              }

              p:nth-child(2) {
                font-size: 20px;
                margin-top: -10px;
              }
            }
          }
        }
      }
    }
  }
}

.x-house {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 1;
        height: 445px;
        overflow-y: auto;

        .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }

      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 1;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 90%;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}

.x-people {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .ctx_span {
    margin-top: 20px;
    color: #69f1f7;
    font-family: PingFangSC-Medium;
    font-size: 22px;
    text-align: center;
  }

  .people-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #fff;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;

      .footer-category {
        width: 100%;
        height: 200px;
        margin-top: 40px;

        .category-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #fff;
          letter-spacing: 0;
          text-align: left;
        }

        .category-ctx {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
}

.input {
  font-size: 14px;
  color: #fff;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.header-item {
  width: 186px;
  height: 100%;
  border: none;
  outline: none;
  background: #06121d;
  border: 1px solid rgba(62, 178, 215, 0);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  padding: 0 14px;
  box-sizing: border-box;
}

.header-btn {
  width: 66px;
  height: 100%;
  background: #72edf5;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}

.header-select {
  width: 186px;
  height: 100%;
}
</style>
<style>
.dateselect .el-input__inner {
  background: #06121d;
}
.el-date-editor .el-range-input {
  background: #06121d;
}
</style>
